<template>
    <div>
        <!-- 搜索框 -->
        <form action="/">
            <van-search show-action background="#3399ff" v-model="value" @search="onSearch" @input="searching" :placeholder="hot"
                @cancel="fs" />
        </form>

        <!-- 搜索时遮罩 -->
        <!-- trim()去掉字符串的前后空格 -->
        <div class="result" v-show="value.trim().length">
            <van-cell :title="item.title" v-for="item in resultList" :key="item._id" @click="outcome(item.title)">
            </van-cell>
        </div>

        <div class="wz">
            <p>大家都在搜</p>
            <div class="rs">
                <span>雪碧宣布永远放弃绿瓶</span><span>背景太假</span><br><br>
                <span>uzi名场面变身</span><span>俄罗斯决定开发6g</span>
            </div>
        </div>

        <!-- 历史搜索 -->
        <div class="ss">
            <p>历史搜索</p>
            <van-cell :title="ios"
             v-for="(ios,index) in historys" 
             :key="ios" 
             style="border-bottom: 2px solid pink"
             @click="ls(ios)"
             >
                <van-icon name="close" @click.stop="close(index)" />
            </van-cell>
        </div>
        <p class="a" @click="clearover">清除历史记录
            <van-icon name="delete-o" />
        </p>

    </div>
</template>

<script>
import { Search } from 'vant';

// 接口
import { search } from '@/api/api'


// 函数防抖 debounce (高大上)
function debounce(fn, t = 1500) {
    let times = null;
    return function (...arg) {
        clearTimeout(times);

        times = setTimeout(() => {
            fn.apply(this, arg)   // fn 业务逻辑 (具体要干的事情)
        }, t)
    }
}

export default {
    components: {
        [Search.name]: Search
    },
    data() {
        return {
            value: '',
            resultList: [],
            historys: [],
            title:'',
            hot:'每日一遍 社恐再见！'
        };
    },
    // 找历史数据
    created() {
        // 在本地存储里找数据
        let historys = localStorage.getItem('historys');
        if (historys) {
            this.historys = JSON.parse(historys) || []
        }
    },
    methods: {
        // 路由跳转 定时器
        fs() {
            setTimeout(() => {
                this.$router.push('/')
            }, 100);
        },
        // 搜索框内容监听
        // 函数防抖 debounce
        searching: debounce(function (e) {
            e = e.trim();
            if (e.length === 0) {
                this.resultList = '';
                return
            }
            // 接口请求
            search({
                key_word: e
            }).then(res => {
                if (res.data.code == 0) {
                    this.resultList = res.data.data
                }
            })
        }),
        // 按回车键搜索
        onSearch(e){
            e = e.trim();
            // 搜索值为输入值 无输入值时搜索值为 placeholder的值
            e = e || this.hot;
            this.outcome(e)
        },
        // 搜索结果
        outcome(title) {
            title =title.trim();

            // 判断搜索值是否一致 相同时删除下面的
            let index = this.historys.findIndex(v=>v===title);
            if(index>=0){
                this.historys.splice(index,1)
            }

            // 倒序排列
            this.historys.unshift(title);

            // 存到本地
            localStorage.setItem('historys', JSON.stringify(this.historys))
            // 点击跳转
            this.$router.push('/searchlist?key_word='+title)

            // }

            // 不成熟的写法 (适用于初级理解)
            //     // 函数防抖
            //     clearTimeout(times);
            //     times = setTimeout(() => {
            //         // 接口请求
            //         search({
            //             key_word: e
            //         }).then(res => {
            //             if (res.data.code == 0) {
            //                 this.resultList = res.data.data
            //             }
            //         })
            //     }, 1500);
            // }
        },
        // 点击删除历史搜索
        close(index){
            this.historys.splice(index,1);
            localStorage.setItem('historys', JSON.stringify(this.historys))
        },
        // 全部清除
        clearover(){
            this.historys = [];
            localStorage.setItem('historys',JSON.stringify(this.historys))
        },
        // 点击置顶 (直接再次执行搜索点击事件)
        ls(title){
            this.outcome(title)
        }
        
    }
}
</script>

<style scoped>
.a {
    text-align: center;
    color: gray;
    font-size: 14px;
}

.result {
    position: fixed;
    left: 0;
    right: 0;
    top: 54px;
    bottom: 0;
    overflow-y: auto;
    background-color: #f4f4f4;
    z-index: 999;
}

.wz {
    width: 100%;
    border-bottom: 13px solid rgb(239, 237, 237);
    padding-bottom: 35px;
}

.wz p {
    color: gray;
    padding-left: 15px;
    margin-bottom: 20px;
}

.wz .rs {
    padding-left: 15px;
}

.rs span {
    margin-right: 20px;
    border: 1px solid gray;
    padding: 8px 10px;
    border-radius: 20px;
    color: rgb(88, 84, 79);
}

/* 历史搜索 */
.ss {
    width: 100%;
    border-bottom: 2px solid pink;
}

.ss p {
    color: gray;
    padding-left: 15px;
    margin-bottom: 20px;
}
</style>